<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EnglishReadCard - 英语单词听写</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/desktop.css">
    <link rel="stylesheet" href="css/components.css">
</head>
<body>
    <!-- 主容器 -->
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="app-title">📚 EnglishReadCard</h1>
            </div>
            
            <nav class="sidebar-nav">
                <button class="nav-item active" data-page="home">
                    <span class="nav-icon">🏠</span>
                    <span class="nav-text">首页</span>
                </button>
                <button class="nav-item" data-page="wordbooks">
                    <span class="nav-icon">📚</span>
                    <span class="nav-text">单词本</span>
                </button>
                <button class="nav-item" data-page="history">
                    <span class="nav-icon">📊</span>
                    <span class="nav-text">学习历史</span>
                </button>
                <button class="nav-item" data-page="wrongbook">
                    <span class="nav-icon">📕</span>
                    <span class="nav-text">错词本</span>
                    <span class="nav-badge" id="wrongbook-count">0</span>
                </button>
                <button class="nav-item" data-page="statistics">
                    <span class="nav-icon">📈</span>
                    <span class="nav-text">统计分析</span>
                </button>
                <button class="nav-item" data-page="settings">
                    <span class="nav-icon">⚙️</span>
                    <span class="nav-text">设置</span>
                </button>
            </nav>
            
            <div class="sidebar-footer">
                <div class="quick-stats">
                    <div class="stat-item">
                        <span class="stat-label">今日学习</span>
                        <span class="stat-value" id="today-words">0</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">总词汇量</span>
                        <span class="stat-value" id="total-words">120</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 首页 -->
            <div class="page active" id="page-home">
                <div class="page-header">
                    <h2>开始学习</h2>
                    <p class="page-subtitle">选择学习模式开始你的学习之旅</p>
                </div>

                <div class="quick-actions">
                    <div class="action-card card-highlight">
                        <div class="card-icon">🎯</div>
                        <h3>智能推荐</h3>
                        <p>基于你的学习情况推荐 20 个单词</p>
                        <button class="btn btn-primary" id="btn-smart-recommend">开始学习 →</button>
                    </div>

                    <div class="action-card" id="wrongbook-card">
                        <div class="card-icon">📕</div>
                        <h3>错词本</h3>
                        <p><span id="wrongbook-count-home">0</span> 个单词待复习</p>
                        <button class="btn btn-secondary" id="btn-review-wrong">立即复习 →</button>
                    </div>
                </div>

                <div class="wordbook-grid" id="wordbook-grid">
                    <!-- 单词本卡片将动态生成 -->
                </div>
            </div>

            <!-- 单词本页面 -->
            <div class="page" id="page-wordbooks">
                <div class="page-header">
                    <h2>单词本管理</h2>
                    <button class="btn btn-primary" id="btn-upload-wordbook-page">+ 上传单词本</button>
                </div>

                <div class="wordbook-tabs">
                    <button class="tab-btn active" data-tab="all">全部</button>
                    <button class="tab-btn" data-tab="builtin">内置</button>
                    <button class="tab-btn" data-tab="custom">自定义</button>
                </div>

                <div class="wordbook-list" id="wordbook-list">
                    <!-- 单词本列表将动态生成 -->
                </div>
            </div>

            <!-- 单词本详情页面 -->
            <div class="page" id="page-wordbook-detail">
                <div class="page-header">
                    <button class="btn-back" id="btn-back-from-detail">← 返回</button>
                    <h2 id="detail-wordbook-name">单词本详情</h2>
                    <div class="header-actions" id="detail-actions">
                        <!-- 操作按钮 -->
                    </div>
                </div>

                <div class="detail-stats" id="detail-stats">
                    <!-- 统计信息 -->
                </div>

                <div class="detail-controls">
                    <div class="search-box">
                        <input type="text" id="detail-search" class="search-input" placeholder="搜索单词...">
                    </div>
                    <div class="table-controls">
                        <select id="detail-filter-category">
                            <option value="all">全部分类</option>
                        </select>
                        <select id="detail-filter-type">
                            <option value="all">全部类型</option>
                            <option value="单词">单词</option>
                            <option value="驼峰短语">驼峰短语</option>
                        </select>
                        <select id="detail-page-size">
                            <option value="50">每页 50 条</option>
                            <option value="100" selected>每页 100 条</option>
                            <option value="200">每页 200 条</option>
                            <option value="500">每页 500 条</option>
                        </select>
                    </div>
                </div>

                <div class="wordbook-table-container">
                    <table class="wordbook-table" id="wordbook-table">
                        <thead>
                            <tr>
                                <th width="5%">序号</th>
                                <th width="20%">单词</th>
                                <th width="15%">中文</th>
                                <th width="12%">分类</th>
                                <th width="10%">类型</th>
                                <th width="25%">示例</th>
                                <th width="8%">难度</th>
                                <th width="5%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="wordbook-table-body">
                            <!-- 表格内容动态生成 -->
                        </tbody>
                    </table>
                </div>

                <div class="pagination" id="detail-pagination">
                    <!-- 分页控件 -->
                </div>
            </div>

            <!-- 单词本选择页面 -->
            <div class="page" id="page-select-wordbooks">
                <div class="page-header">
                    <button class="btn-back" id="btn-back-from-select">← 返回</button>
                    <h2>选择单词本</h2>
                </div>

                <div class="selection-summary">
                    <span>已选择: <strong id="selected-count">0</strong> 个单词本</span>
                    <span>总词汇: <strong id="selected-total-words">0</strong> 个</span>
                    <button class="btn btn-secondary btn-sm" id="btn-clear-selection">清空选择</button>
                </div>

                <div class="wordbook-selection" id="wordbook-selection">
                    <!-- 单词本选择列表 -->
                </div>

                <div class="study-config">
                    <h3>听写设置</h3>
                    
                    <div class="config-item">
                        <label>抽取数量</label>
                        <div class="input-group">
                            <input type="number" id="select-count" value="20" min="1" max="1000">
                            <div class="quick-select">
                                <button class="btn-tag" data-count="10">10词</button>
                                <button class="btn-tag" data-count="20">20词</button>
                                <button class="btn-tag" data-count="50">50词</button>
                                <button class="btn-tag" data-count="all">全部</button>
                            </div>
                        </div>
                    </div>

                    <div class="config-item">
                        <label>抽取策略</label>
                        <div class="radio-group">
                            <label class="radio-label">
                                <input type="radio" name="strategy" value="random" checked>
                                <span>完全随机</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="strategy" value="wrong">
                                <span>优先错词</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="strategy" value="difficult">
                                <span>优先难词</span>
                            </label>
                            <label class="radio-label">
                                <input type="radio" name="strategy" value="smart">
                                <span>智能推荐</span>
                            </label>
                        </div>
                    </div>

                    <div class="config-item">
                        <label>学习模式</label>
                        <div class="mode-selection">
                            <button class="mode-card" data-mode="recitation">
                                <h4>📖 背诵模式</h4>
                                <p>快速浏览，自我评估</p>
                            </button>
                            <button class="mode-card" data-mode="dictation">
                                <h4>✍️ 听写模式</h4>
                                <p>完整拼写练习</p>
                            </button>
                        </div>
                    </div>

                    <button class="btn btn-primary btn-large" id="btn-start-study">开始学习</button>
                </div>
            </div>

            <!-- 听写模式页面 -->
            <div class="page" id="page-dictation">
                <div class="dictation-header">
                    <button class="btn-back" id="btn-exit-dictation">← 退出</button>
                    <div class="progress-info">
                        <span class="progress-text"><span id="dictation-current">1</span>/<span id="dictation-total">20</span></span>
                        <span class="accuracy-text">正确率: <strong id="dictation-accuracy">0%</strong></span>
                    </div>
                </div>

                <div class="dictation-container">
                    <!-- 听写界面内容将动态生成 -->
                </div>
            </div>

            <!-- 背诵模式页面 -->
            <div class="page" id="page-recitation">
                <div class="recitation-header">
                    <button class="btn-back" id="btn-exit-recitation">← 退出</button>
                    <div class="progress-info">
                        <span class="progress-text"><span id="recitation-current">1</span>/<span id="recitation-total">20</span></span>
                        <span class="mastery-text">已掌握: <strong id="recitation-mastered">0</strong></span>
                    </div>
                </div>

                <div class="recitation-container">
                    <!-- 背诵界面内容将动态生成 -->
                </div>
            </div>

            <!-- 学习历史页面 -->
            <div class="page" id="page-history">
                <div class="page-header">
                    <h2>学习历史</h2>
                    <div class="header-actions">
                        <button class="btn btn-secondary" id="btn-export-history">📥 导出历史</button>
                        <button class="btn btn-danger" id="btn-clear-history">🗑️ 清空历史</button>
                    </div>
                </div>

                <!-- 统计概览 -->
                <div class="stats-overview">
                    <div class="stat-card">
                        <div class="stat-icon">📊</div>
                        <div class="stat-content">
                            <div class="stat-label">总学习次数</div>
                            <div class="stat-value" id="stat-total-sessions">0</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">📚</div>
                        <div class="stat-content">
                            <div class="stat-label">学习单词数</div>
                            <div class="stat-value" id="stat-total-words">0</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">⏱️</div>
                        <div class="stat-content">
                            <div class="stat-label">学习时长</div>
                            <div class="stat-value" id="stat-total-time">0分</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">🎯</div>
                        <div class="stat-content">
                            <div class="stat-label">平均正确率</div>
                            <div class="stat-value" id="stat-avg-accuracy">0%</div>
                        </div>
                    </div>
                </div>

                <!-- 筛选栏 -->
                <div class="filter-bar">
                    <select id="history-filter-time">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                    </select>
                    <select id="history-filter-mode">
                        <option value="all">全部模式</option>
                        <option value="dictation">听写模式</option>
                        <option value="recitation">背诵模式</option>
                    </select>
                </div>

                <!-- 历史记录列表 -->
                <div class="history-list" id="history-list">
                    <!-- 历史记录将在这里动态生成 -->
                </div>
            </div>

            <!-- 错词本页面 -->
            <div class="page" id="page-wrongbook">
                <div class="page-header">
                    <h2>错词本</h2>
                    <div class="header-actions">
                        <button class="btn btn-secondary" id="btn-review-all-wrong">复习所有错词</button>
                        <button class="btn btn-danger" id="btn-clear-wrongbook">清空错词本</button>
                    </div>
                </div>

                <div class="filter-bar">
                    <input type="text" class="search-input" id="search-wrong-words" placeholder="搜索错词...">
                    <select id="wrongbook-sort">
                        <option value="recent">最近错误</option>
                        <option value="count">错误次数</option>
                        <option value="alpha">字母顺序</option>
                    </select>
                    <select id="wrongbook-filter">
                        <option value="all">全部分类</option>
                    </select>
                </div>

                <div class="wrong-words-list" id="wrong-words-list">
                    <!-- 错词列表 -->
                </div>
            </div>

            <!-- 统计分析页面 -->
            <div class="page" id="page-statistics">
                <div class="page-header">
                    <h2>统计分析</h2>
                    <div class="stats-period">
                        <button class="period-btn active" data-period="today">今天</button>
                        <button class="period-btn" data-period="week">本周</button>
                        <button class="period-btn" data-period="month">本月</button>
                        <button class="period-btn" data-period="all">全部</button>
                    </div>
                </div>
                <div class="statistics-content" id="statistics-content">
                    <!-- 统计图表 -->
                </div>
            </div>

            <!-- 设置页面 -->
            <div class="page" id="page-settings">
                <div class="page-header">
                    <h2>设置</h2>
                </div>
                <div class="settings-content" id="settings-content">
                    <!-- 设置选项 -->
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <div class="modal" id="modal-upload">
        <div class="modal-content">
            <div class="modal-header">
                <h3>上传单词本</h3>
                <button class="btn-close" data-modal="modal-upload">×</button>
            </div>
            <div class="modal-body">
                <div class="upload-area" id="upload-area">
                    <p>📁 点击或拖拽 CSV 文件到这里</p>
                    <input type="file" id="file-input" accept=".csv" hidden>
                </div>
                <div class="upload-info">
                    <p>支持格式: CSV</p>
                    <p>单词本容量上限: 8000 个单词</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 键盘快捷键提示 -->
    <div class="shortcuts-hint" id="shortcuts-hint">
        <div class="shortcut-item"><kbd>Space</kbd> 播放</div>
        <div class="shortcut-item"><kbd>Enter</kbd> 提交/下一题</div>
        <div class="shortcut-item"><kbd>Tab</kbd> 查看答案</div>
        <div class="shortcut-item"><kbd>Ctrl+S</kbd> 跳过</div>
        <div class="shortcut-item"><kbd>Esc</kbd> 返回</div>
    </div>

    <!-- 加载核心脚本 -->
    <!-- 注意：按依赖顺序加载 -->
    <script src="js/builtin-wordbooks.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/speech.js"></script>
    <script src="js/wordbook.js"></script>
    <script src="js/wordbook-detail.js"></script>
    <script src="js/dictation.js"></script>
    <script src="js/recitation.js"></script>
    <script src="js/history.js"></script>
    <script src="js/wrongbook.js"></script>
    <script src="js/statistics.js"></script>
    <script src="js/keyboard.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

